<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="iconfont icon-back"></text>
      </view>
      <text class="title">考勤记录</text>
    </view>

    <!-- 筛选器 -->
    <view class="filter-bar">
      <view class="date-filter">
        <view class="date-selector" @tap="showDatePicker('start')">
          <text class="label">开始日期</text>
          <text class="value">{{ startDate }}</text>
          <text class="iconfont icon-calendar"></text>
        </view>
        <text class="separator">-</text>
        <view class="date-selector" @tap="showDatePicker('end')">
          <text class="label">结束日期</text>
          <text class="value">{{ endDate }}</text>
          <text class="iconfont icon-calendar"></text>
        </view>
      </view>
      <view class="filter-actions">
        <view class="status-filter" @tap="showStatusFilter">
          <text>状态</text>
          <text class="iconfont icon-arrow-down"></text>
        </view>
        <button class="filter-btn" @tap="applyFilter">筛选</button>
      </view>
    </view>

    <!-- 考勤统计 -->
    <view class="summary-card">
      <view class="summary-item">
        <text class="count">{{ summary.normal }}</text>
        <text class="label">正常</text>
      </view>
      <view class="summary-item">
        <text class="count">{{ summary.late }}</text>
        <text class="label">迟到</text>
      </view>
      <view class="summary-item">
        <text class="count">{{ summary.early }}</text>
        <text class="label">早退</text>
      </view>
      <view class="summary-item">
        <text class="count">{{ summary.absent }}</text>
        <text class="label">旷工</text>
      </view>
      <view class="summary-item">
        <text class="count">{{ summary.leave }}</text>
        <text class="label">请假</text>
      </view>
    </view>

    <!-- 考勤记录列表 -->
    <view class="record-list">
      <view class="month-divider" v-if="records.length">
        <text>{{ currentMonth }} 考勤记录</text>
      </view>
      <view class="record-item" v-for="(item, index) in records" :key="index">
        <view class="record-date">
          <text class="day">{{ item.day }}</text>
          <text class="weekday">{{ item.weekday }}</text>
        </view>
        <view class="record-details">
          <view class="record-time">
            <view class="time-row">
              <text class="time-label">上班打卡</text>
              <text class="time-value" :class="{ 'abnormal': item.checkInStatus !== 'normal' }">
                {{ item.checkInTime }}
              </text>
              <text class="status-badge" v-if="item.checkInStatus === 'late'">迟到</text>
              <text class="status-badge leave" v-if="item.checkInStatus === 'leave'">请假</text>
            </view>
            <view class="time-row">
              <text class="time-label">下班打卡</text>
              <text class="time-value" :class="{ 'abnormal': item.checkOutStatus !== 'normal' }">
                {{ item.checkOutTime }}
              </text>
              <text class="status-badge" v-if="item.checkOutStatus === 'early'">早退</text>
              <text class="status-badge leave" v-if="item.checkOutStatus === 'leave'">请假</text>
            </view>
          </view>
          <view class="record-status" :class="item.status">
            {{ getStatusText(item.status) }}
          </view>
        </view>
      </view>
      <view class="empty-state" v-if="!records.length">
        <image src="http://101.37.17.240:9000/zhxy/empty-data.png" mode="aspectFit"></image>
        <text>暂无考勤记录</text>
      </view>
    </view>

    <!-- 日期选择器 -->
    <view class="date-picker-mask" v-if="showDatePickerFlag" @tap="hideDatePicker"></view>
    <view class="date-picker-container" v-if="showDatePickerFlag">
      <view class="date-picker-header">
        <text class="date-picker-title">选择日期</text>
        <text class="date-picker-close" @tap="hideDatePicker">×</text>
      </view>
      <view class="date-picker-content">
        <picker-view class="date-picker" :value="pickerValue" @change="onDatePickerChange">
          <picker-view-column>
            <view class="picker-item" v-for="(year, index) in years" :key="index">{{ year }}年</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(month, index) in months" :key="index">{{ month }}月</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(day, index) in days" :key="index">{{ day }}日</view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="date-picker-footer">
        <button class="date-picker-btn cancel" @tap="hideDatePicker">取消</button>
        <button class="date-picker-btn confirm" @tap="confirmDatePicker">确定</button>
      </view>
    </view>

    <!-- 状态筛选弹窗 -->
    <view class="status-filter-mask" v-if="showStatusFilterFlag" @tap="hideStatusFilter"></view>
    <view class="status-filter-container" v-if="showStatusFilterFlag">
      <view class="status-filter-header">
        <text class="status-filter-title">考勤状态</text>
        <text class="status-filter-close" @tap="hideStatusFilter">×</text>
      </view>
      <view class="status-filter-content">
        <view 
          class="status-filter-item" 
          v-for="(item, index) in statusOptions" 
          :key="index"
          :class="{ active: selectedStatus === item.value }"
          @tap="selectStatus(item.value)"
        >
          <text>{{ item.label }}</text>
          <text class="iconfont icon-check" v-if="selectedStatus === item.value"></text>
        </view>
      </view>
      <view class="status-filter-footer">
        <button class="status-filter-btn cancel" @tap="hideStatusFilter">取消</button>
        <button class="status-filter-btn confirm" @tap="confirmStatusFilter">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    const now = new Date()
    const currentYear = now.getFullYear()
    const currentMonth = now.getMonth() + 1
    const currentDay = now.getDate()
    
    // 计算一个月前的日期
    const oneMonthAgo = new Date()
    oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1)
    const prevMonth = oneMonthAgo.getMonth() + 1
    const prevMonthYear = oneMonthAgo.getFullYear()
    const prevMonthDay = Math.min(currentDay, new Date(prevMonthYear, prevMonth, 0).getDate())
    
    return {
      // 日期筛选
      startDate: `${prevMonthYear}-${String(prevMonth).padStart(2, '0')}-${String(prevMonthDay).padStart(2, '0')}`,
      endDate: `${currentYear}-${String(currentMonth).padStart(2, '0')}-${String(currentDay).padStart(2, '0')}`,
      showDatePickerFlag: false,
      currentPickerType: 'start', // 'start' 或 'end'
      
      // 日期选择器数据
      years: Array.from({length: 10}, (_, i) => currentYear - 5 + i),
      months: Array.from({length: 12}, (_, i) => i + 1),
      days: Array.from({length: 31}, (_, i) => i + 1),
      pickerValue: [5, currentMonth - 1, currentDay - 1], // 默认选中当前日期
      
      // 状态筛选
      showStatusFilterFlag: false,
      selectedStatus: 'all',
      tempSelectedStatus: 'all',
      statusOptions: [
        { label: '全部', value: 'all' },
        { label: '正常', value: 'normal' },
        { label: '迟到', value: 'late' },
        { label: '早退', value: 'early' },
        { label: '旷工', value: 'absent' },
        { label: '请假', value: 'leave' }
      ],
      
      // 考勤统计
      summary: {
        normal: 18,
        late: 2,
        early: 1,
        absent: 0,
        leave: 1
      },
      
      // 考勤记录
      currentMonth: '2023年5月',
      records: [
        {
          day: '08',
          weekday: '周一',
          checkInTime: '08:28',
          checkOutTime: '17:35',
          checkInStatus: 'normal',
          checkOutStatus: 'normal',
          status: 'normal'
        },
        {
          day: '07',
          weekday: '周日',
          checkInTime: '休息日',
          checkOutTime: '休息日',
          checkInStatus: 'rest',
          checkOutStatus: 'rest',
          status: 'rest'
        },
        {
          day: '06',
          weekday: '周六',
          checkInTime: '休息日',
          checkOutTime: '休息日',
          checkInStatus: 'rest',
          checkOutStatus: 'rest',
          status: 'rest'
        },
        {
          day: '05',
          weekday: '周五',
          checkInTime: '08:52',
          checkOutTime: '17:30',
          checkInStatus: 'late',
          checkOutStatus: 'normal',
          status: 'abnormal'
        },
        {
          day: '04',
          weekday: '周四',
          checkInTime: '08:30',
          checkOutTime: '17:05',
          checkInStatus: 'normal',
          checkOutStatus: 'early',
          status: 'abnormal'
        },
        {
          day: '03',
          weekday: '周三',
          checkInTime: '08:25',
          checkOutTime: '17:32',
          checkInStatus: 'normal',
          checkOutStatus: 'normal',
          status: 'normal'
        },
        {
          day: '02',
          weekday: '周二',
          checkInTime: '请假',
          checkOutTime: '请假',
          checkInStatus: 'leave',
          checkOutStatus: 'leave',
          status: 'leave'
        },
        {
          day: '01',
          weekday: '周一',
          checkInTime: '08:30',
          checkOutTime: '17:30',
          checkInStatus: 'normal',
          checkOutStatus: 'normal',
          status: 'normal'
        }
      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    getStatusText(status) {
      const statusMap = {
        'normal': '正常',
        'abnormal': '异常',
        'absent': '旷工',
        'late': '迟到',
        'early': '早退',
        'leave': '请假',
        'rest': '休息日'
      }
      return statusMap[status] || status
    },
    // 日期选择相关
    showDatePicker(type) {
      this.currentPickerType = type
      this.showDatePickerFlag = true
      
      // 设置选择器初始值
      const date = type === 'start' ? new Date(this.startDate) : new Date(this.endDate)
      const yearIndex = this.years.findIndex(y => y === date.getFullYear())
      const monthIndex = date.getMonth()
      const dayIndex = date.getDate() - 1
      
      this.pickerValue = [yearIndex, monthIndex, dayIndex]
    },
    hideDatePicker() {
      this.showDatePickerFlag = false
    },
    onDatePickerChange(e) {
      this.pickerValue = e.detail.value
    },
    confirmDatePicker() {
      const year = this.years[this.pickerValue[0]]
      const month = this.months[this.pickerValue[1]]
      const day = this.days[this.pickerValue[2]]
      
      const formattedDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
      
      if (this.currentPickerType === 'start') {
        this.startDate = formattedDate
      } else {
        this.endDate = formattedDate
      }
      
      this.hideDatePicker()
    },
    // 状态筛选相关
    showStatusFilter() {
      this.tempSelectedStatus = this.selectedStatus
      this.showStatusFilterFlag = true
    },
    hideStatusFilter() {
      this.showStatusFilterFlag = false
      this.tempSelectedStatus = this.selectedStatus
    },
    selectStatus(value) {
      this.tempSelectedStatus = value
    },
    confirmStatusFilter() {
      this.selectedStatus = this.tempSelectedStatus
      this.hideStatusFilter()
      this.applyFilter()
    },
    // 应用筛选
    applyFilter() {
      uni.showLoading({
        title: '加载中...'
      })
      
      // 模拟网络请求延迟
      setTimeout(() => {
        // 实际应用中应该调用API获取筛选数据
        // 这里简单模拟筛选效果
        if (this.selectedStatus !== 'all') {
          this.records = this.records.filter(record => 
            record.status === this.selectedStatus || 
            record.checkInStatus === this.selectedStatus || 
            record.checkOutStatus === this.selectedStatus
          )
        }
        
        uni.hideLoading()
      }, 500)
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f6f7fb;
  padding-bottom: 30rpx;
}

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #4080ff;
  padding: 0 30rpx;
  color: #fff;
  
  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      font-size: 40rpx;
    }
  }
  
  .title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    padding-right: 60rpx; // 平衡左侧返回按钮的宽度
  }
}

.filter-bar {
  background: #fff;
  padding: 20rpx 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .date-filter {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .date-selector {
      flex: 1;
      display: flex;
      align-items: center;
      background: #f6f7fb;
      height: 70rpx;
      border-radius: 8rpx;
      padding: 0 20rpx;
      
      .label {
        font-size: 24rpx;
        color: #999;
        margin-right: 10rpx;
      }
      
      .value {
        flex: 1;
        font-size: 26rpx;
        color: #333;
      }
      
      .iconfont {
        font-size: 32rpx;
        color: #999;
      }
    }
    
    .separator {
      margin: 0 20rpx;
      color: #999;
    }
  }
  
  .filter-actions {
    display: flex;
    align-items: center;
    
    .status-filter {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f6f7fb;
      height: 70rpx;
      border-radius: 8rpx;
      padding: 0 20rpx;
      margin-right: 20rpx;
      
      text {
        font-size: 26rpx;
        color: #333;
      }
      
      .iconfont {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .filter-btn {
      width: 160rpx;
      height: 70rpx;
      line-height: 70rpx;
      background: #4080ff;
      color: #fff;
      font-size: 28rpx;
      border-radius: 8rpx;
      padding: 0;
    }
  }
}

.summary-card {
  display: flex;
  background: #fff;
  padding: 30rpx;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .summary-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    
    &:not(:last-child):after {
      content: '';
      position: absolute;
      right: 0;
      top: 10rpx;
      bottom: 10rpx;
      width: 1rpx;
      background: #f0f0f0;
    }
    
    .count {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .label {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.record-list {
  padding: 0 30rpx;
  
  .month-divider {
    display: flex;
    align-items: center;
    margin: 30rpx 0;
    
    text {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      padding: 0 20rpx;
    }
    
    &:before, &:after {
      content: '';
      flex: 1;
      height: 1rpx;
      background: #e0e0e0;
    }
  }
  
  .record-item {
    display: flex;
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .record-date {
      width: 80rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 30rpx;
      
      .day {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }
      
      .weekday {
        font-size: 24rpx;
        color: #999;
        margin-top: 6rpx;
      }
    }
    
    .record-details {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .record-time {
        .time-row {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .time-label {
            width: 140rpx;
            font-size: 26rpx;
            color: #666;
          }
          
          .time-value {
            font-size: 28rpx;
            color: #333;
            margin-right: 16rpx;
            
            &.abnormal {
              color: #f44336;
            }
          }
          
          .status-badge {
            font-size: 22rpx;
            color: #fff;
            background: #f44336;
            padding: 2rpx 12rpx;
            border-radius: 4rpx;
            
            &.leave {
              background: #ff9800;
            }
          }
        }
      }
      
      .record-status {
        padding: 6rpx 20rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
        
        &.normal {
          color: #4caf50;
          background: rgba(76, 175, 80, 0.1);
        }
        
        &.abnormal {
          color: #f44336;
          background: rgba(244, 67, 54, 0.1);
        }
        
        &.absent {
          color: #9c27b0;
          background: rgba(156, 39, 176, 0.1);
        }
        
        &.leave {
          color: #ff9800;
          background: rgba(255, 152, 0, 0.1);
        }
        
        &.rest {
          color: #9e9e9e;
          background: rgba(158, 158, 158, 0.1);
        }
      }
    }
  }
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 0;
    
    image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 30rpx;
    }
    
    text {
      font-size: 28rpx;
      color: #999;
    }
  }
}

// 日期选择器
.date-picker-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.date-picker-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 101;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
  
  .date-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .date-picker-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .date-picker-close {
      font-size: 40rpx;
      color: #999;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
  .date-picker-content {
    height: 500rpx;
    
    .date-picker {
      width: 100%;
      height: 100%;
      
      .picker-item {
        line-height: 100rpx;
        text-align: center;
        font-size: 32rpx;
      }
    }
  }
  
  .date-picker-footer {
    display: flex;
    border-top: 1rpx solid #f0f0f0;
    
    .date-picker-btn {
      flex: 1;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 32rpx;
      
      &.cancel {
        background: #f5f5f5;
        color: #333;
      }
      
      &.confirm {
        background: #4080ff;
        color: #fff;
      }
    }
  }
}

// 状态筛选弹窗
.status-filter-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.status-filter-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 101;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
  
  .status-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .status-filter-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .status-filter-close {
      font-size: 40rpx;
      color: #999;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
  .status-filter-content {
    max-height: 600rpx;
    overflow-y: auto;
    
    .status-filter-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      text {
        font-size: 30rpx;
        color: #333;
      }
      
      .iconfont {
        font-size: 36rpx;
        color: #4080ff;
      }
      
      &.active {
        background: rgba(64, 128, 255, 0.05);
      }
    }
  }
  
  .status-filter-footer {
    display: flex;
    border-top: 1rpx solid #f0f0f0;
    
    .status-filter-btn {
      flex: 1;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 32rpx;
      
      &.cancel {
        background: #f5f5f5;
        color: #333;
      }
      
      &.confirm {
        background: #4080ff;
        color: #fff;
      }
    }
  }
}
</style> 